<template>
  <div class="container">
    <h2>医院信息管理</h2>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading">数据加载中...</div>

    <!-- 医院信息展示 -->
    <el-card v-else class="hospital-info">
      <div class="info-row">
        <span class="label">医院图片：</span>
        <img :src="hospitalData.icon" style="width: 100px">
      </div>
      <div class="info-row">
        <span class="label">医院名称：</span>
        <span>{{ hospitalData.name }}</span>
      </div>
      <div class="info-row">
        <span class="label">医院地址：</span>
        <span>{{ hospitalData.address }}</span>
      </div>
      <div class="info-row">
        <span class="label">医院级别：</span>
        <span v-if="hospitalData.level">{{ hospitalData.level.name }}</span>
      </div>
      <div class="info-row">
        <span class="label">医院描述：</span>
        <span>{{ hospitalData.desc }}</span>
      </div>
      <div class="info-row">
        <span class="label">就诊导引：</span>
        <span>{{ hospitalData.guidance }}</span>
      </div>
      <div class="info-row">
        <span class="label">温馨提示：</span>
        <span>{{ hospitalData.prompt }}</span>
      </div>

      <el-button type="primary" @click="showEditDialog">编辑医院信息</el-button>
    </el-card>

    <!-- 编辑弹窗 -->
    <el-dialog v-model="dialogVisible" title="编辑医院信息" width="50%">
      <el-form :model="editForm" label-width="100px">
        <el-form-item label="医院描述">
          <el-input
              v-model="editForm.desc"
              type="textarea"
              :rows="3"
              maxlength="8000"
              show-word-limit
          />
        </el-form-item>
        <el-form-item label="就诊导引">
          <el-input
              v-model="editForm.guidance"
              type="textarea"
              :rows="2"
              maxlength="2000"
              show-word-limit
          />
        </el-form-item>
        <el-form-item label="温馨提示">
          <el-input
              v-model="editForm.prompt"
              type="textarea"
              :rows="2"
              maxlength="1000"
              show-word-limit
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveHospitalInfo">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import axios from "axios";

const hospitalName=ref("北京大学第三医院")


// 医院数据
const id=ref(0)

const loading = ref(false)
const dialogVisible = ref(false)
const editForm = ref({
  desc: '',
  guidance: '',
  prompt: ''
})
// 同步获取医院数据
const user = ref({})
const hospitalData = ref({})
onMounted(()=>{
  user.value = JSON.parse(sessionStorage.getItem("user"))
  initHos()
})
const initHos = ()=>{
  axios.get('/hospital/getHos',{params:{id : user.value.hid}}).then(res=>{
    if (res.data.code === 200){
      hospitalData.value = res.data.data
    }else {
      ElMessage.error(res.data.msg)
    }
  })
}

const saveHospitalInfo = () => {
  // 确保医院ID存在
  if (!hospitalData.value.id) {
    return ElMessage.error('无法获取医院ID，请刷新页面重试');
  }

  // 使用URLSearchParams发送表单数据
  const params = new URLSearchParams();
  params.append('id', hospitalData.value.id);
  params.append('desc', editForm.value.desc || '');
  params.append('guidance', editForm.value.guidance || '');
  params.append('prompt', editForm.value.prompt || '');

  axios.post("/hospital/updateHos", params)
      .then(response => {
        if (response.data.code === 200) {
          // 更新本地数据
          hospitalData.value.desc = editForm.value.desc;
          hospitalData.value.guidance = editForm.value.guidance;
          hospitalData.value.prompt = editForm.value.prompt;

          ElMessage.success('医院信息更新成功');
          dialogVisible.value = false;
        } else {
          ElMessage.error(response.data.msg || '更新失败');
        }
      })
      .catch(error => {
        console.error('保存失败:', {
          status: error.response?.status,
          data: error.response?.data,
          error: error.message
        });
        ElMessage.error(`保存失败: ${error.response?.data?.message || error.message}`);
      });
}

// 显示编辑弹窗（保持不变）
const showEditDialog = () => {
  editForm.value = {
    desc: hospitalData.value.desc,
    guidance: hospitalData.value.guidance,
    prompt: hospitalData.value.prompt
  }
  dialogVisible.value = true
}

// 组件挂载时加载数据
onMounted(() => {
  // fetchHospitalData()
  initHos()
  /*if (!hospitalData.value.id) {
    ElMessage.warning('未获取到医院信息')
  }*/
})

</script>

<style scoped>
.container {
  font-family: Arial, sans-serif;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

h2 {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
}
.hospital-info {
  margin-top: 20px;
  padding: 20px;
}
.info-row {
  margin-bottom: 15px;
  line-height: 1.6;
}
.info-row .label {
  display: inline-block;
  width: 100px;
  font-weight: bold;
  color: #606266;
}
.loading {
  text-align: center;
  padding: 50px;
  font-size: 18px;
  color: #666;
}
</style>